import { ref } from "vue";

export function useEditColumns() {
  const deleteCouponFunc = ref<Function>();

  const columns: TableColumnList = [
    {
      label: "参数key",
      prop: "key",
      cellRenderer: ({ row }) => <el-input v-model={row.key} />
    },
    {
      label: "输入类别",
      prop: "type",
      cellRenderer: ({ row }) => {
        const types = ["text"];
        const list = types.map(item => (
          <el-option key={item} label={item} value={item} />
        ));
        return (
          <el-select v-model={row.type} placeholder="请选择输入类别">
            {list}
          </el-select>
        );
      }
    },
    {
      label: "参数title",
      prop: "title",
      cellRenderer: ({ row }) => <el-input v-model={row.title} />
    },
    {
      label: "知否必填",
      prop: "required",
      cellRenderer: ({ row }) => (
        <el-switch
          v-model={row.required}
          active-value="true"
          inactive-value="false"
        />
      )
    },
    {
      label: "操作",
      slot: "operation",
      width: 140,
      fixed: "right"
    }
  ];

  const couponColumns: TableColumnList = [
    {
      label: "场次名称",
      prop: "acName",
      cellRenderer: ({ row }) => <el-input v-model={row.acName} />
    },
    {
      label: "可用人数",
      prop: "acNum",
      cellRenderer: ({ row }) => (
        <el-input-number v-model={row.acNum} precision={0} step={1} />
      )
    },
    {
      label: "价格",
      prop: "acPrice",
      cellRenderer: ({ row }) => (
        <el-input-number v-model={row.acPrice} precision={2} step={0.01} />
      )
    },
    {
      label: "场次起始(日期)",
      width: 200,
      cellRenderer: ({ row }) => (
        <div>
          <el-date-picker
            v-model={row.startTime}
            type="datetime"
            placeholder="开始时间(日期)"
            value-format="YYYY-MM-DD HH:mm:ss"
          />
          <el-date-picker
            v-model={row.endTime}
            class="mt-1"
            type="datetime"
            placeholder="结束时间(日期)"
            value-format="YYYY-MM-DD HH:mm:ss"
          />
        </div>
      )
    },
    {
      label: "有效期",
      width: 220,
      cellRenderer: ({ row }) => (
        <div class="flex flex-col center">
          <el-radio-group v-model={row.dateType} class="mb-1">
            <el-radio-button value="a">静态时间</el-radio-button>
            <el-radio-button value="d">动态时间</el-radio-button>
          </el-radio-group>
          {row.dateType === "d" && (
            <el-input-number v-model={row.dateNum} precision={0} step={1} />
          )}
          {row.dateType !== "d" && (
            <el-date-picker
              v-model={row.expTime}
              type="datetime"
              class="mt-1"
              disabled-date={time => {
                return time.getTime() < Date.now();
              }}
              value-format="YYYY-MM-DD HH:mm:ss"
            />
          )}
        </div>
      )
    },
    {
      label: "人员控制",
      prop: "totalNum",
      width: 160,
      cellRenderer: ({ row }) => (
        <div>
          <el-input-number
            v-model={row.totalNum}
            precision={0}
            step={1}
            placeholder="场次总数"
          />
          <el-input-number
            v-model={row.leftNum}
            precision={0}
            step={1}
            class="mt-1"
            placeholder="场次余数"
          />
          <el-input-number
            v-model={row.maxNum}
            precision={0}
            step={1}
            class="mt-1"
            placeholder="最多领取数/人"
          />
        </div>
      )
    },
    {
      label: "是否显示",
      prop: "isShow",
      width: 70,
      cellRenderer: ({ row }) => {
        if (!row.isShow) {
          row.isShow = 1;
        }
        return (
          <el-switch v-model={row.isShow} active-value={1} inactive-value={0} />
        );
      }
    },
    {
      label: "是否可退款",
      prop: "isRefund",
      width: 70,
      cellRenderer: ({ row }) => {
        if (!row.isRefund) {
          row.isRefund = 1;
        }
        return (
          <el-switch
            v-model={row.isRefund}
            active-value={1}
            inactive-value={0}
          />
        );
      }
    },
    {
      label: "是否删除",
      slot: "operation",
      width: 70
    },
    {
      label: "是否删除",
      prop: "isDelete",
      hide: true,
      width: 70,
      cellRenderer: ({ row }) => {
        if (!row.isDelete) {
          row.isDelete = 0;
        }
        if (!row.metId) {
          return (
            <el-button
              class="reset-margin"
              link
              type="primary"
              onClick={deleteCouponFunc.value(row)}
            >
              删除
            </el-button>
          );
        }
        return (
          <el-switch
            v-model={row.isDelete}
            active-value={1}
            inactive-value={0}
          />
        );
      }
    }
  ];

  return {
    editColumns: columns,
    couponColumns,
    deleteCouponFunc
  };
}
